<template>
	<view class="uni-global-box">
		<view class="uni-global-title">
			表单
		</view>
		<view class="uni-global-body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						用户名
					</view>
					<u-form-item prop="name" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.name" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						上传头像 {{form.image.length}}/9
					</view>
					<u-form-item prop="image" :border-bottom="false">
						<uni-file-picker 
							v-model="form.image" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="9"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						生日
					</view>
					<u-form-item prop="birthday" :border-bottom="false">
						<u-input v-model="form.birthday"
							type="select"
							class="u-form-input"
							@click="calendar1.show=true" 
							style="margin:0"
						/>
						<u-calendar v-model="calendar1.show" mode="date" @change="onCalendar1"></u-calendar>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						简介(多行输入框)
					</view>
					<u-form-item prop="intro" :border-bottom="false">
						<u-input class="u-form-textarea" type="textarea" v-model="form.intro" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						性别
					</view>
					<u-form-item prop="sex" :border-bottom="false">
						<u-input v-model="select1.current.label"
							type="select"
							class="u-form-input"
							style="margin:0"
							@click="select1.show=true" 
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						水果
					</view>
					<u-form-item  prop="checkbox"  :border-bottom="false">
						<u-checkbox-group v-model="form.checkbox">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index"
								:name="item.name">
								{{ item.name }}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						味道
					</view>
					<u-form-item label="" prop="radio"  :border-bottom="false">
						<u-radio-group v-model="form.radio">
							<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name"  :border-bottom="false">
						开关
					</view>
					<u-form-item  prop="switchVal">
							<u-switch v-model="form.switchVal"></u-switch>
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					birthday: "",
					intro: '',
					sex: '',
					checkbox: '',
					image: '',
					radio: '',
					switchVal: false
				},
				checkboxList1: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList1: [
					{
						name: '鲜甜',
						disabled: false,
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				select1: {
					show: false,
					current: {},
					list: [{
							value: 1,
							label: '男'
						},
						{
							value: 2,
							label: '女'
						}
					],
				},
				calendar1: {
					show: false,
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur']
					}],
					birthday: [{
						required: true,
						message: '请选择日历',
						trigger: ['change', 'blur']
					}],
					checkbox: [{
						type: "array",
						required: true,
						message: '请选择水果',
						trigger: ['blur']
					}]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						
						console.log('验证通过',this.form);
					} else {
						console.log('验证失败',this.form);
					}
				});
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss">
	.body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
</style>